<template>
  <header>
    <div>
      <span class="left_img">
         <img src="../common/imgs/rrmine_logo.png" alt="logo" class="middle">
      </span>
      <ul class="routers">
        <li>
          <a href="" class="active">首页</a>
        </li>
        <li>
          <a href="">算力市场</a>
        </li>
        <li>
          <a href="">平台动态</a>
        </li>
        <li>
          <a href="">帮助中心</a>
        </li>
        <li>
          <a href="">关于我们</a>
        </li>
      </ul>
      <div class="no_login hide">
        <a href="">登录</a>
        <a href="">注册</a>
        <a href="" class="download">下载</a>
      </div>
      <div class="is_login">
        <a href="" class="to_mine">
          <img src="../common/imgs/mine.png" alt="我的" class="middle">
        </a>
        <a href="" class="download">下载</a>
      </div>
    </div>
  </header>
</template>
<script>
  export default {
    name: 'CpsHeader',
    data() {
      return {}
    },
  }
</script>
<style scoped>
  /*--------------header---------------*/
  header{
    height: 72px;background: rgba(23, 23, 23, 1);position: fixed;z-index: 1;width: 100%;left: 0;top: 0;
  }
  header>div{
    width: 1400px;margin: auto;height: 100%;
  }
  header .left_img{
    float: left;height: 100%;display: inline-block;line-height: 72px;
    width: 127px;
    /* background: url("./common/image/rrmine_logo.png") center center no-repeat; */
    /* background-size: 100% auto; */
  }
  header .left_img>img{
    /*width: 127px;background: url("../common/image/rrmine_logo.png") center center no-repeat;*/
    background-size: 127px auto;
  }
  header .routers{
    overflow: hidden;float: left;padding-left: 40px;
  }
  header .routers li , header .routers{
    height: 100%;
  }
  header .routers li{
    float: left;
  }
  header .routers a{
    line-height: 72px;padding: 0 19px;display: inline-block;height: 100%;font-size: 16px;color: #fff;
  }

  header .routers a:hover{
    color: #FFAB32;
  }
  header .routers .active{
    color: #FFAB32;
  }
  header .no_login ,header .is_login{
    float: right;overflow: hidden;height: 100%;
  }
  header .no_login>a,header .is_login>a{
    height: 100%;display: inline-block;line-height: 72px;float: left;font-size: 16px;padding: 0 12px;color: #fff;
  }
  header .is_login>.to_mine{
    width: 59px;height: 72px;
    /*background: url("../common/image/mine.png") center center no-repeat;background-size: 17px 17px;*/
  }
  header .download{
    padding-right: 0;
  }
  header .no_login>a:hover{
    color: #FFAB32;
  }
  header .is_login>a:hover{
    color: #FFAB32;
  }
  [hidden]{
    display: none!important;
  }
  header .hide{
    display: none;
  }
  header .is_login .download{
    position: relative;
  }
  header .is_login .download:before{
    content: '';display: inline-block;position: absolute;z-index: 1;left: 0;top:50%;margin-top:-12px;width: 1px;height: 24px;background: rgba(255, 255, 255, 0.58);
  }
  header .to_mine>img{width: 17px;}
  @media screen and (max-width: 1199px){
    html,body {
      width: 1200px;
    }
  }
  /*--------------header 上---------------*/
</style>
